import { Outlet, useModel, useParams, useRouteData, } from '@umijs/max';
import { Layout, } from 'antd';
import { useEffect, useRef, useState } from 'react';
import styles from './basicLayout.less';
import Header from './_components/Header';
import ToTop from '@/components/ToTop';
import LoginModal from '@/components/LoginModal';
export default () => {
  // const {setMenuShow} = useModel('global');
  // const scrollChange = useRef(0)
  // useEffect(() => {
  //   const toggleVisibility = () => {
  //     const element = document.documentElement;
  //     const scrollTop = element.scrollTop;
  //     if (scrollTop - scrollChange.current > 200) {
  //       setMenuShow(false)
  //       scrollChange.current = scrollTop
  //     } else if (scrollTop - scrollChange.current < -200) {
  //       setMenuShow(true)
  //       scrollChange.current = scrollTop
  //     }
  //   };
  //   window.addEventListener('scroll', toggleVisibility);
  //   return () => {
  //     window.removeEventListener('scroll', toggleVisibility);
  //   }
  // }, []);
  

  return (
    <div className={styles.container}  >
      <Layout className={styles.content} >
        <Layout className={styles.headerContainer}><Header /></Layout>
        <Layout className={styles.bottomContainer} >
          <ToTop />
          <Outlet />
          <LoginModal />
        </Layout>
      </Layout>
    </div>
  );
};
